<template>
  <div class="per-card-black">
    <Headline
      :headline1="$t('m.EquipmentCenter') + '  /  '"
      :headline2="$t('m.CardBlacklist')"
    ></Headline>
    <a-card style="width: 100%">
      <a-input-search
        style="
          width: 310px;
          margin-bottom: 20px;

          margin-right: 20px;
        "
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        :enter-button="$t('m.Inquire')"
        size="default"
        v-model="blackNameKey"
        @search="search"
      />
      <a-button
        type="primary"
        icon="plus-square"
        @click="add"
        v-if="isTrue('card:blacklist:add')"
      >
        {{ $t("m.Add") }}
      </a-button>
      <a-modal
        v-model="addisShow"
     :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
        :title="$t('m.NewBlackName')"
        :maskClosable="false"
        @ok="handleOk"
      >
        <a-form-model-item
          style="display: flex; justify-content: center"
          :label="$t('m.PleaseEnterTheCardNumber')"
        >
          <a-input style="width: 200px" v-model="cardNo" />
        </a-form-model-item>
        <a-form-model-item
          style="display: flex; justify-content: center"
          :label="$t('m.PleaseEnterRemarks')"
        >
          <a-input style="width: 200px" v-model="des" />
        </a-form-model-item>
      </a-modal>
      <a-table
        size="small"
        :data-source="blackNameList"
        :columns="columns"
        :rowKey="(record) => record.id"
        :pagination="false"
        bordered
      >
        <div slot="tags" slot-scope="text, tags, i">
          <a-button
            icon="delete"
            :disabled="!isTrue('card:blacklist:del')"
            type="danger"
            @click="delBlackName(text, tags, i)"
            >{{ $t("m.Delete") }}</a-button
          >
        </div>
      </a-table>
      <a-pagination
        show-size-changer
        :default-current="1"
        :total="total"
        @change="Pages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="onShowSizeChange"
        class="pages"
      />
    </a-card>
    <Delete ref="unitdelete" :dalete="dalete" @confirm="delIsok"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";
import {
  getBlackName,
  getPerages,
  addBlackName,
  delBlackName,
} from "@/api/perAges";
import { Setperms } from "@/assets/js/setperms";
export default {
  name: "Percardblack",
  components: { Headline, Delete },
  data() {
    return {
      blackNameList: [],
      blackNameKey: "",
      dalete: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      columns: [
        { title: this.$t("m.CardNumber"), dataIndex: "cardno", key: "cardno" },
        { title: this.$t("m.remark"), dataIndex: "des", key: "des" },
        { title: this.$t("m.submitter"), dataIndex: "creator", key: "creator" },
        {
          title: this.$t("m.creationTime"),
          dataIndex: "createdate",
          key: "createdate",
        },
        {
          title: this.$t("m.Operation"),
          dataIndex: "tags",
          key: "tags",
          scopedSlots: { customRender: "tags" },
        },
      ],
      addisShow: false,
      cardNo: "",
      des: "",
      blackId: "",
      total: null,
      forminitial: {
        limit: 10, //每页展示多少条
        page: 1, //展示第几页
        start: 0, //数据截取
        key: "",
      },
      editisShow: false,
    };
  },
  created() {
    this.getBlackNameList({ start: 0, limit: 10 });
    this.parms = Setperms(
      this.$route.fullPath,
      JSON.parse(sessionStorage.getItem("menu"))
    );
    console.log(this.parms);
  },
  methods: {
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    // 获取黑名单数据列表
    getBlackNameList(params) {
      getBlackName({ params })
        .then((res) => {
          this.total = res.data.total;
          this.blackNameList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("获取数据失败");
        });
    },
    // 确认编辑
    editOk() {
      this.editisShow = true;
    },
    // 添加黑名单
    handleOk() {
      if (this.cardNo.length <= 0) {
        this.$message.info("请输入卡号");
        return;
      }
      if (this.des.length <= 0) {
        this.$message.info("请输入备注");
        return;
      }
      addBlackName({ cardNo: this.cardNo, des: this.des })
        .then((res) => {
          this.$message.success("添加成功");
          getBlackName({ params: { start: 0, limit: 0 } })
            .then((res) => {
              let { data } = res.data;
              this.blackNameList = data;
            })
            .catch((err) => {
              console.log(err);
              this.$message.error("获取数据失败");
            });
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("添加失败");
        });
      this.cardNo = "";
      this.des = "";
      this.addisShow = false;
    },
    // 黑名单关键字搜索
    search() {
      this.forminitial.key = this.blackNameKey;
      this.getBlackNameList(this.forminitial);
    },
    // 删除黑名单
    delBlackName(text, tags, i) {
      this.blackId = tags.id;
      this.$refs.unitdelete.visible = true;
    },
    // 确认删除
    delIsok() {
      this.$refs.unitdelete.visible = false;
      delBlackName({ blackNameId: this.blackId })
        .then((res) => {
          if (res.data.success == true) {
            this.getBlackNameList({ start: 0, limit: 0 });
            this.$message.success(res.data.msg);
            this.getBlackNameList({ start: 0, limit: 0 });
          }
          if (res.data.success == false) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("删除失败");
        });
      this.$refs.unitdelete.visible = false;
    },
    // 点击编辑
    editBlackName(text, tags) {
      console.log(tags);
      this.addisShow = true;
      this.cardNo = tags.cardno;
      this.des = tags.des;
    },

    add() {
      this.addisShow = true;
    },
    onShowSizeChange(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.getBlackNameList(this.forminitial);
    },
    Pages(page, pageSize) {
      this.forminitial.limit = pageSize;
      this.forminitial.page = page;
      this.forminitial.start = (page - 1) * pageSize;
      this.getBlackNameList(this.forminitial);
    },
  },

  mounted() {},
  computed: {},
};
</script>

<style>
.pages {
  text-align: end;
  margin-top: 15px !important;
}
</style>
